<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  <meta charset="UTF-8">
  <meta name="Author" content="haley">
  <meta name="Keywords" content="前端最常用的UI插件，最常用的测试工具及方法">
  <meta name="Description" content="最常用的UI插件，最常用的测试工具及方法">
  <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
  <link crossorigin="anonymous" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" href="https://lib.baomitu.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/index.css" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ" src="https://lib.baomitu.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-8t+aLluUVnn5SPPG/NbeZCH6TWIvaXIm/gDbutRvtEeElzxxWaZN+G/ZIEdI/f+y" src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/changeTitle.js"></script>
  <link href="imgs/favicon.ico" rel="shortcut icon">
  <title></title>
  <style>
    .btn{
      margin-right: 10px;
    }
  </style>
  <script>
    var data={
      title:'最常用的工具及方法，前端最常用的UI插件',
      list:[
        {
          title:'工具及方法',
          href:'https://haley1688.gitee.io/toolshaley/',
          list:[
            {
              title:'浏览器分辨率测算',
              href:'https://haley1688.gitee.io/toolshaley/pages/checkBrowser.html',
              className:'btn-info'
            },
            {
              title:'微信聊天在线模拟',
              href:'http://sc.appbs.cn/',
              className:'btn-info'
            },

          ]
        }
        ,{
          title:'常用的UI插件，及基本样式',
          href:'http://haley1688.gitee.io/haleyui/',
          list:[
            {
              title:'css高级选择器',
              href:'https://haley1688.gitee.io/toolshaley/pages/cssHighSelector.html',
              className:'btn-info'
            }
          ]
        }
        ,{
          title:'前端静态资源库',
          href:'',
          list:[
            {
              title:'360baomitu',
              href:'https://cdn.baomitu.com/',
              className:'btn-info'
            }
            ,{
              title:'腾讯网静态资源公共库',
              href:'https://libs.qq.com/',
              className:'btn-info'
            }
          ]
        }
      ]
    };
  </script>
</head>
<body>
<div id="app">
  <div class="container">
    <h3 class="text-center">{{title}}</h3>
  </div>
  <ul class="container list-unstyled">
    <li class="col-sm-6" v-for="(item,index) in list" :key="index">
    <div class="panel panel-info">
      <div class="panel-heading"><a :href="item.href" target="_blank" v-if="item.href">{{item.title}} 点击查看>></a><span v-else="">{{item.title}}</span></div>
      <div class="panel-body">
        <div>
          <a class="btn" :class="item2.className" target="_blank" v-for="item2 in item.list" :href="item2.href">{{item2.title}}</a>
        </div>
      </div>
    </div>
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: data
  });
</script>
</body>
</html>
